<!-- 复制组件 -->
<template>
  <el-button link @click="handleClipboard" :style="style">
    <slot>
      <el-icon><DocumentCopy color="var(--el-color-primary)" /></el-icon>
    </slot>
  </el-button>
</template>

<script setup lang="ts">
defineOptions({
  name: "CopyButton",
  inheritAttrs: false,
})

const props = defineProps({
  text: {
    type: String,
    default: "",
  },
  style: {
    type: Object,
    default: () => ({}),
  },
})

function handleClipboard() {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    // 使用 Clipboard API
    navigator.clipboard
      .writeText(props.text)
      .then(() => {
        ElMessage.success("Copy successfully")
      })
      .catch((error) => {
        ElMessage.warning("Copy failed")
        console.log("[CopyButton] Copy failed", error)
      })
  } else {
    // 兼容性处理（useClipboard 有兼容性问题）
    const input = document.createElement("input")
    input.style.position = "absolute"
    input.style.left = "-9999px"
    input.setAttribute("value", props.text)
    document.body.appendChild(input)
    input.select()
    try {
      const successful = document.execCommand("copy")
      if (successful) {
        ElMessage.success("Copy successfully!")
      } else {
        ElMessage.warning("Copy failed!")
      }
    } catch (err) {
      ElMessage.error("Copy failed.")
      console.log("[CopyButton] Copy failed.", err)
    } finally {
      document.body.removeChild(input)
    }
  }
}
</script>
